<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
<script src='https://cdn.bootcss.com/echarts/3.4.0/echarts.js'></script>
<script src='ecStat.js'></script>
<script>
                // 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var colors = ['#5793f3', '#d14a61', '#675bba'];
option={
    title: {
        text: '未来一周气温变化',
        subtext: '纯属虚构',
    },
    tooltip:{
        trigger:'axis'
    },
    legend:{
        data:['最高气温','最低气温']
    },
    toolbox:{
        show:true,
        feature:{
            dataZoom:{                         //缩放视图
                yAxisIndex:'none'
            },
            dataView:{readOnly:false},      //数据视图，可编辑
            magicType:{type:['line','bar']},//切换类型，折线图和柱状图
            resore:{},
            saveAsImage:{}
        }
    },
    xAxis:{
        type:'category',
        boundaryGap:false,
        data:['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis:{
        type:'value', 
        axisLabel:{
            formatter:'{value} °C'    //规则化数据
        }
    },
    series:[{
        name:'最高气温',
        type:'line',
        data:[11, 11, 15, 13, 12, 13, 10],
        markPoint:{                               //标注极值点
            data:[{type:'max',name:'最大值'},{type:'min',name:'最小值'}]
        },
        markLine:{data:[{type:'average',name:'平均值'}]}  //标注平均值
    },{
        name:'最低气温',
        type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint:{
                data:[{name:'周最低',value:-2,xAxis:1,yAxis:-1.5}]
            },
            markLine:{
                data:[{type:'average',name:'平均值'},
                [{symbol:'none',x:'90%',yAxis:'max'},{symbol:'circle',label:{normal:{
                    position:'start',
                    formatter:'最大值'
                }},type:'max',name:'最高点'}]]
            }
    }]
}
// 为echarts对象加载数据 
myChart.setOption(option); 
    </script>
</body>